<template>
    <view>
		        
		<myhead  :status="true" ></myhead>
		
        <view class="top">
		
            <image class="coverImg" :src="coverImgUrl" mode="" style="width: 300rpx;height: 300rpx;"></image>
			
			<view class="text">
				<text>{{title}}</text>
			<!-- <br> -->
			
			<p style="color: white;">{{desc}}</p>
			<p style="padding-left: 50rpx;color: white;">全部共{{songlist.length}}首</p>
			</view>
			
		</view>
		
        <view class="songlist" v-for="(item,index) in songlist" :key="index" style="border-radius: 50px;">
       			<view class="songitem" style="margin-top: 20px;" @tap="toSong(item.id)">
       			<text style="color: darkgrey;">{{index+1}}</text>
       			<text style="margin-left: 10px;">{{item.name}}</text>
       			<view style="margin-left: 18px;">
       				<image v-if="privileges[index].flag > 60 && privileges[index].flag < 70" src="../../static/dujia.png" mode="" style="width: 40rpx;height: 30rpx;"></image>
       				<image v-if="privileges[index].maxbr == 999000" src="../../static/sq.png" mode="" style="width: 40rpx;height: 30rpx;"></image>
       				{{ item.ar[0].name }} - {{ item.name }}
       			</view>
       			</view>
               </view>
        <!-- <navigator url="/pages/player/player">播放</navigator> -->
    </view>
</template>

<script>
	import {listDetail} from "../../common/api.js";
    export default {
        data() {
            return {
                coverImgUrl: "",
                songlist: [] ,// 使用数组形式声明歌曲列表
				title: "",
				desc: "",
				privileges: "",
				// loading: true,
            }
        },
        methods: {
            toSong(id){
				console.log("歌曲id:"+id);
				uni.navigateTo({
					url:"/pages/player/player?id="+id,
				})
			}
        },
        onLoad(options) {
              let id = options.id;
              listDetail(id).then(res=>{
                  // console.log(res.data);
                  this.coverImgUrl = res.playlist.coverImgUrl;
                  this.songlist = res.playlist.tracks;
				  this.title=res.playlist.name;
				  this.desc=res.playlist.description;
				  this.privileges = res.privileges;
				  console.log(res.privileges)
              })
            // 根据id请求榜单详情数据并进行处理
            // uni.request({
            //     url: "http://10.92.40.30:3000/playlist/detail?id=" + this.id,
            //     method: "GET",
            //     success: (res) => {
            //         // 在这里处理请求成功后的数据
            //         this.coverImgUrl = res.data.playlist.coverImgUrl;
            //         this.songlist = res.data.playlist.tracks; // 将歌曲列表赋值给 this.songlist
            //         console.log(res.data.playlist.tracks);
            //     },
            //     fail: (err) => {
            //         // 在这里处理请求失败的情况
            //         console.error(err);
            //     }
            // });
        }
    }
</script>

<style>
/* 可以添加样式 */
.top image{
	margin-left: 30px;
	border-radius: 5px;
	flex-shrink:0 ;
}

.top .text{ 
margin-left: 30px;
color: white;
}
.top p{
	margin-top: 10px;
	color: black
}
.top{
	background-color: #67b3a6;
	display: flex;
	
}

</style>
